<template lang="pug">
    skin(@up="up",@down="down",@yes="yes",@back="back",@duringUp="up",@duringDown="down")
            div(class="title") ----时间设置----
            div(class="containers")
                div(class="left")
                    i(class="iconfont clock-icon") &#xe609;
                div(class="right")
                    div(class="times")
                        span(:class="{'active-block': activeId == 0 ? true : false}") {{hour}}
                        span(style="flex:0") :
                        span(:class="{'active-block': activeId == 1 ? true : false}") {{minute}}
                    div(class="dates")
                        span(:class="{'active-block': activeId == 2 ? true : false}") {{year}}
                        span -
                        span(:class="{'active-block': activeId == 3 ? true : false}") {{month | fixedInterge2}}
                        span -
                        span(:class="{'active-block': activeId == 4 ? true : false}") {{date | fixedInterge2}}
</template>

<script>
import dayjs from "dayjs";
import Base from "@/mixins/BaseVue";
export default {
  mixins: [Base],
  data() {
    return {
      hour: dayjs().format("HH"),
      minute: dayjs().format("mm"),
      year: dayjs().format("YYYY"),
      month: dayjs().format("MM"),
      date: dayjs().format("DD"),
      activeId: 0
    };
  },
  methods: {
    up() {
      if (this.activeId == 0) {
        const hour = parseInt(this.hour);
        this.hour = hour == 23 ? 0 : hour + 1;
      }
      if (this.activeId == 1) {
        const minute = parseInt(this.minute);
        this.minute = minute == 60 ? 0 : minute + 1;
      }
      if (this.activeId == 2) {
        this.year++;
      }
      if (this.activeId == 3) {
        const month = parseInt(this.month);
        this.month = month == 12 ? 1 : month + 1;
      }
      if (this.activeId == 4) {
        const date = parseInt(this.date);
        this.date = date == 30 ? 1 : date + 1;
      }
    },
    down() {
      if (this.activeId == 0) {
        const hour = parseInt(this.hour);
        this.hour = hour == 0 ? 23 : hour - 1;
      }
      if (this.activeId == 1) {
        const minute = parseInt(this.minute);
        this.minute = minute == 0 ? 60 : minute - 1;
      }
      if (this.activeId == 2) {
        this.year--;
      }
      if (this.activeId == 3) {
        const month = parseInt(this.month);
        this.month = month == 1 ? 12 : month - 1;
      }
      if (this.activeId == 4) {
        const date = parseInt(this.date);
        this.date = date == 1 ? 30 : date - 1;
      }
    },

    back() {
      this.calTimeDiff();
      this.$router.push("/machine-setting");
    },
    yes() {
      this.activeId = this.activeId == 4 ? 0 : this.activeId + 1;
    },
    calTimeDiff() {
      // 计算出时差
      const format = `${this.year}-${this.month}-${this.date} ${this.hour}:${this.minute}:00`;
      const time = dayjs(format);
      let diff = dayjs().diff(time, "seconds");
      if (time < dayjs()) diff = -diff;
      window.machine.timeDiff = diff;
      console.log(time, diff);
    }
  },
  created() {
    const configTime = dayjs().add(window.machine.timeDiff, "seconds");
    this.year = configTime.format("YYYY");
    this.month = configTime.format("MM");
    this.date = configTime.format("DD");
    this.hour = configTime.format("HH");
    this.minute = configTime.format("mm");
  }
};
</script>

<style lang="less" scoped>
.title {
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
}
.containers {
  clear: both;
  @left_width: 63px;
  .left {
    width: @left_width;
    float: left;
    text-align: right;
  }
  .right {
    width: 90px;
    float: left;

    .times,
    .dates {
      text-align: center;
      margin: 5px 0;
      font-size: 16px;
    }
  }
}
.clock-icon {
  @size: 50px;
  //   width: @size;
  //   height: @size;
  font-size: @size;
}
</style>
